<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--179000612陈攀文-->
    <style type="text/css">
        #showtime{
            background-image: url(../image/clock.png) ;
            background-repeat: no-repeat;
            font-size: 48px;
            text-align: center;
            padding-top: 30px;
            width: 240px;
            height: 146px;
            color: #FFFFFF;"
        }
        .dttime{
            background-image: url(../image/cald.png);
            background-repeat: no-repeat;
            height: 140px;
            width:145px ;
        }
        #xq{
            font-size: 25px;
            text-align: center;
            color: #FFFFFF;"
        }
        #rq{
            font-size: 70px;
            text-align: center;
            font-weight: bold;
        }

    </style>
</head>
<body>
<div class="dttime" >
    <div id="xq"></div><!-- 星期 -->
    <div id="rq"></div><!-- 日期 -->
</div>
<div id="showtime"></div><!-- 时间 -->

</body>
</html>
<script>
    function showtime(){
        let mytime = new Date();
        let h = mytime.getHours();
        if(h<10){h="0"+h}
        let m = mytime.getMinutes();
        if(m<10){m="0"+m}
        let s = mytime.getSeconds();
        if(s<10){s="0"+s}
        let tnn = `${h}:${m}:${s}`;
        document.querySelector("#showtime").innerHTML = tnn;
        window.setTimeout("showtime()",1000);
    }
    showtime();

    function xq(){
        let a = ["日", "一", "二", "三", "四", "五", "六"];
        let week = new Date().getDay();
        let str = "星期"+ a[week];
        document.querySelector("#xq").innerHTML = str;

    }
    xq();

    function rq(){
        let mytime = new Date();
        let myt = mytime.getDate();
        if(myt<10){myt="0"+myt}
        document.querySelector("#rq").innerHTML = myt;
    }
    rq();
</script>